<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片纵向切换</title>
  <link rel="stylesheet" type="text/css" href="css/public.css" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.pageshowimg {
	width: 553px;
	float: left;
	overflow: hidden;
	margin-top: 20px;
}

.pageshowdh {
	height: 530px;width: 85px;  float: left; overflow: hidden; margin-right: 16px
}

.pageshowdh ul {
	margin-top: 20px;
}

.pageshowdh li {
	width: 85px; height: 106px; overflow: hidden
}

.pageshowdh a {
	border-bottom: #fff 2px solid; border-left: #fff 2px solid; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; display: block; margin-bottom: 4px; border-top: #fff 2px solid; border-right: #fff 2px solid; padding-top: 1px
}

.pageshowdh a:hover {
	border-bottom-color: #d40c19; border-top-color: #d40c19; border-right-color: #d40c19; border-left-color: #d40c19
}

.pageshowsmall a img {
	width: 79px; height: 97px
}

.pageshowbig {
	width: 448px; float: left; height: 480px; overflow: hidden
}

.pageshowbig img {
	width: 448px; height: 550px
}

</style>



</head>

<body>
<div class="pageshowimg">
    <div class="pageshowdh">
      <ul>
        <li><a onmouseover="$('#goods_big_img').attr('src','images/01.jpg');" title="" onclick="" href="javascript:;">
        <img src="images/01.jpg" name="p_pic" width="78" height="90" id="p_pic" /></a></li>
        <li><a onmouseover="$('#goods_big_img').attr('src','images/02.jpg');" title="" onclick="" href="javascript:;">
        <img src="images/01.jpg" name="p_pic" width="78" height="90" id="p_pic" /></a></li>       
        <li><a onmouseover="$('#goods_big_img').attr('src','images/03.jpg');" title="" onclick="" href="javascript:;">
        <img src="images/03.jpg" name="p_pic" width="78" height="90" id="p_pic" /></a></li>
        <li><a onmouseover="$('#goods_big_img').attr('src','images/04.jpg');" title="" onclick="" href="javascript:;"><img src="images/04.jpg" name="p_pic" width="78" height="90" id="p_pic" /></a></li>        
      </ul>        
      </div>
      <div class="pageshowbig"><a title="" href=""><img id="goods_big_img" alt="" src="images/01.jpg" /></a></div>
</div>
</body>
</html>
